<template>
  <div class="hello">
    <h3>{{ msg }}</h3>
    <h3>{{ msg1 }}</h3>
    <div>
      <button @click="change">改变父组件的值1</button>
      <button @click="change2">改变父组件的值2</button>
    </div>
    <div>
      <h2>{{ b }}</h2>
    </div>
    <div>
      <slot/>
    </div>
    <div>
      <slot name="title"></slot>
    </div>
    <div>
      <slot name="footer" :scope="state"></slot>
    </div>
    <div>
      <p>{{attrs.msg == $attrs.msg}}</p>
    </div>
  </div>
</template>

<script setup>

  const props = defineProps({
    msg: {
      type: String
    },
    msg1: String
  })
  console.log(props.msg, props.msg1)
  const message = inject('message')
  console.log(message, 'provide来的')

  const emits = defineEmits(['childFn', 'childFn1'])
  const change = () => {
    emits('childFn', '改变')
  }
  const change2 = () => {
    emits('childFn1', '改变1')
  }

  const a = 1
  const b = ref(2)

  defineExpose({
    a,
    b
  })

  const state = reactive({
    name: 'zs',
    age: 10
  })

  const slots = useSlots()
  console.log(slots.default())
  console.log(slots.title())
  const attrs = useAttrs()

  const route = useRoute()
  const router = useRouter()
  function pushWithQuery(query) {
    router.push({
      name: 'search',
      query: {
        ...route.query
      }
    })
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
